<template>
  <div class="hm-tree">
    <ul v-for="(item,index) in treeData" :key="item.label">
      {{item.label}}
      <span
      class="hm-tree-open"
        v-show="item.children && item.children.length>0"
        @click="changeOpen(index)"
      >--[{{open[index] ? "-":"+"}}]</span>

      <!-- 判断是否有chuldren，递归自己 -->
      <li 
      
      v-show="item.children && open[index]">
        <hm-tree :treeData="item.children"   />
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "hmTree",
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      open: {},
    };
  },
  created() {
    for (let i in this.treeData) {
      //响应式的添加
      this.$set(this.open, i, false);
    }
  },
  methods: {
    changeOpen(index) {
      this.open[index] = !this.open[index];
    },
  },
};
</script>



<style lang="scss">
ul{
  list-style: none;
}

.hm-tree-open{
  cursor:pointer;
}
</style>